<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="/assets/static/plugin/jquery-confirm/jquery-confirm.min.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/static/admin/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/static/admin/css/style.min.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/static/admin/css/materialdesignicons.min.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/static/plugin/bootstrap-markdown-editor/css/bootstrap-markdown-editor.min.css"/>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col p-t-15">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <header class="card-header">
                            <div class="card-title">网站设置</div>
                        </header>
                        <div class="card-body">
                            <form>
                                <div class="form-group">
                                    <label>网站标题</label>
                                    <input type="text" class="form-control" maxlength="20" id="siteTitle" placeholder="输入网站标题"/>
                                </div>
                                <div class="form-group">
                                    <label>站点关键词</label>
                                    <input type="text" class="form-control" maxlength="20" id="siteKeyword" placeholder="输入站点关键词"/>
                                </div>
                                <div class="form-group">
                                    <label>站点描述</label>
                                    <textarea class="form-control" id="siteDesc" rows="5" name="siteDesc" placeholder="请输入站点描述"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>网站Logo</label>
                                    <small class="form-text text-muted">建议尺寸：200x50像素</small>
                                    <input type="file" name="file" class="file1" id="siteLogo" accept="image/*"/>
                                    <img id="siteLogoPreview" src="" alt="Logo预览" style="max-width: 200px; margin-top: 10px;"/>
                                </div>
                                <div class="form-group">
                                    <label>网站Favicon</label>
                                    <small class="form-text text-muted">建议尺寸：32x32像素</small>
                                    <input type="file" class="file2" id="siteFavicon" accept="image/*"/>
                                    <img id="siteFaviconPreview" src="" alt="Favicon预览" style="max-width: 32px; margin-top: 10px;"/>
                                </div>
                                <div class="form-group">
                                    <label for="siteRecord">备案信息</label>
                                    <input class="form-control" type="text" id="siteRecord" name="siteRecord" value=""
                                           placeholder="请输入备案信息"/>
                                </div>
                                <button type="button" id="btnSite" class="btn btn-primary">确认</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关于页设置 -->
        <div class="col p-t-15">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <header class="card-header">
                            <div class="card-title">关于页设置</div>
                        </header>
                        <div class="card-body">
                            <form>
                                <div class="form-group">
                                    <label>关于网站</label>
                                    <textarea class="form-control" name="aboutWebsite" id="aboutWebsite"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>关于站长</label>
                                    <textarea class="form-control" name="aboutAuthor" id="aboutAuthor"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>是否启用</label>
                                    <div class="clearfix">
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="statusOne" name="customRadioInline" class="custom-control-input" value="0" checked=""/>
                                            <label class="custom-control-label" for="statusOne">禁用</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="statusTwo" name="customRadioInline" class="custom-control-input" value="1"/>
                                            <label class="custom-control-label" for="statusTwo">启用</label>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" id="btnAbout" class="btn btn-primary">确认</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/assets/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/static/admin/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/assets/static/plugin/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
<script type="text/javascript" src="/assets/static/plugin/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="/assets/bootstrap/js/bootstrap-multitabs/multitabs.min.js"></script>
<script type="text/javascript" src="/assets/static/admin/js/httpclient.js"></script>
<script type="text/javascript" src="/assets/static/admin/js/authorization/md5.min.js"></script>
<script type="text/javascript" src="/assets/static/plugin/bootstrap-markdown-editor/js/bootstrap-markdown-editor.min.js"></script>
<script type="text/javascript" src="/assets/static/plugin/bootstrap-markdown-editor/js/marked.min.js"></script>
<script type="text/javascript" src="/assets/static/plugin/bootstrap-markdown-editor/js/ace/ace.js"></script>
<script type="text/javascript">
    // 加载表单数据
    function loadFormData() {
        AjaxForm(
            "GET",
            "/api/admin/config",
            "",
            function () {
            },
            function (data) {
                if (data.site_title) {
                    document.getElementById('siteTitle').value = data.site_title; // 网站标题
                }
                if (data.site_keyword) {
                    document.getElementById('siteKeyword').value = data.site_keyword; // 站点关键词
                }
                if (data.site_desc) {
                    document.getElementById('siteDesc').value = data.site_desc; // 站点描述
                }
                if (data.site_record) {
                    document.getElementById('siteRecord').value = data.site_record; // 备案信息
                }
                if (data.site_logo) {// 回显Logo（Base64）
                    document.getElementById('siteLogoPreview').src = `data:image/png;base64,${data.site_logo}`;
                } else {
                    document.getElementById('siteLogoPreview').remove()
                }
                if (data.site_favicon) { // 回显Favicon（Base64）
                    document.getElementById('siteFaviconPreview').src = `data:image/png;base64,${data.site_favicon}`;
                } else {
                    document.getElementById('siteFaviconPreview').remove()
                }
                if (data.about_site) {
                    document.getElementById('aboutWebsite').value = data.about_site;
                }
                if (data.about_author) {
                    document.getElementById('aboutAuthor').value = data.about_author;
                }
                if (data.is_about !== undefined) {
                    // 设置单选按钮状态
                    if (data.is_about) {
                        document.getElementById('statusTwo').checked = true;
                    } else {
                        document.getElementById('statusOne').checked = true;
                    }
                }
                // 配置编辑器
                $('#aboutWebsite').markdownEditor({
                    height: "190px",
                    preview: true,
                    onPreview: function (content, callback) {
                        callback(marked(content));
                    }
                });
                $('#aboutAuthor').markdownEditor({
                    height: "190px",
                    preview: true,
                    onPreview: function (content, callback) {
                        callback(marked(content));
                    }
                });
            },
            function (response) {
                AjaxError(response);
            }
        );
    }

    $(document).ready(function () {
        loadFormData();
    })

    // 提交网站设置表单
    $('#btnSite').on('click', function () {
        const siteTitle = document.getElementById('siteTitle').value; // 网站标题
        const siteKeyword = document.getElementById('siteKeyword').value; // 站点关键词
        const siteDesc = document.getElementById('siteDesc').value; // 站点描述
        const siteRecord = document.getElementById('siteRecord').value; // 备案信息
        const siteLogo = document.getElementById('siteLogo').files[0]; // 网站Logo
        const siteFavicon = document.getElementById('siteFavicon').files[0]; // 网站Favicon

        const formData = new FormData();
        formData.append('site_title', siteTitle);
        formData.append('site_keyword', siteKeyword);
        formData.append('site_desc', siteDesc);
        formData.append('site_record', siteRecord);
        if (siteLogo) {
            formData.append('log', siteLogo);
        }
        if (siteFavicon) {
            formData.append('favicon', siteFavicon);
        }

        AjaxMultipartForm(
            "PUT",
            "/api/admin/config/",
            formData,
            function () {
            },
            function (data) {
                $.alert({
                    title: '操作成功',
                    icon: 'mdi mdi-check-decagram',
                    type: 'green',
                    content: '操作成功',
                    buttons: {
                        okay: {
                            text: '关闭',
                            action: function () {
                                location.reload();
                            }
                        }
                    }
                });
            },
            function (response) {
                AjaxError(response);
            }
        );

    })

    // 提交关于页面设置
    $('#btnAbout').on('click', function () {
        const siteTextarea = document.getElementById('aboutWebsite');
        const siteContent = siteTextarea.value;
        const authorTextarea = document.getElementById('aboutAuthor');
        const authorContent = authorTextarea.value;
        const isEnabled = document.getElementById('statusTwo');

        AjaxForm(
            "PUT",
            "/api/admin/config/",
            {
                about_author: authorContent,
                about_site: siteContent,
                is_about: isEnabled.checked,
            },
            function () {
            },
            function (data) {
                $.alert({
                    title: '操作成功',
                    icon: 'mdi mdi-check-decagram',
                    type: 'green',
                    content: '操作成功',
                    buttons: {
                        okay: {
                            text: '关闭',
                            action: function () {
                                location.reload();
                            }
                        }
                    }
                });
            },
            function (response) {
                AjaxError(response);
            }
        );
    });
</script>
</body>
</html>
